<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id='app'>
    <div class="mod-config">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50">
        </el-table-column>
        <el-table-column prop="deliveryAddrId" header-align="center" align="center" label="收获地址id">
        </el-table-column>
        <el-table-column prop="goodsName" header-align="center" align="center" label="冗余过来的商品名称">
        </el-table-column>
        <el-table-column prop="goodsCount" header-align="center" align="center" label="商品数量">
        </el-table-column>
        <el-table-column prop="goodsPrice" header-align="center" align="center" label="商品单价">
        </el-table-column>
        <el-table-column prop="goodsChannel" header-align="center" align="center" label="登录平台">
        </el-table-column>
        <el-table-column prop="status" header-align="center" align="center" label="订单状态">
        </el-table-column>
        <el-table-column prop="createDate" header-align="center" align="center" label="订单创建时间">
        </el-table-column>
        <el-table-column prop="payDate" header-align="center" align="center" label="支付时间">
        </el-table-column>
        <el-table-column prop="activityId" header-align="center" align="center" label="活动id">
        </el-table-column>
        <el-table-column prop="orderNo" header-align="center" align="center" label="订单号">
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">去结算</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            baseUrl: 'http://localhost:8888/api',
            token: null,
            dataForm: {
              key: ''
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
            addOrUpdateVisible: false
          }
        },
        watch: {

        },
        created () {
          this.token = localStorage.getItem("token")
          if (this.token == null) {
            alert("无权访问")
            location = "./login.html"
          }
          console.log(this.token);
          this.getDataList();
        },
        //方法集合
        methods: {
          // 获取数据列表
          getDataList () {
            this.dataListLoading = true
            axios({
              url: `${this.baseUrl}/live/orderlive/list`,
              method: 'get',
              params: {
                'page': this.pageIndex,
                'limit': this.pageSize,
                'key': this.dataForm.key
              },
              headers: {
                token: this.token
              }
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.dataList = data.page.list
                this.totalPage = data.page.totalCount
              } else {
                this.dataList = []
                this.totalPage = 0
              }
              this.dataListLoading = false
            })
          },
          // 每页数
          sizeChangeHandle (val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
          },
          // 当前页
          currentChangeHandle (val) {
            this.pageIndex = val
            this.getDataList()
          },
          // 多选
          selectionChangeHandle (val) {
            this.dataListSelections = val
          },
        },
      })
    </script>
</body>

</html>